import React, { useState, useEffect } from 'react';
import { Icon, NavBar, Modal, List, Radio, Result } from 'antd-mobile';
import { withRouter } from 'react-router-dom'
import { GetListRefund } from "@/api/tutor/orderList.js"

import "./refundSelect.scss"
import nodata from "@/assets/svg/nodata.svg"

import { R, ORDER_STATUSES } from "@/assets/js/dict"

const confirm = Modal.alert;
const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;

/**
 * 退款选择
 * @param props
 * @constructor
 */
function RefundList (props) {
    let [userInfo] = useState(() => {
        let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        return userInfo
    });
    let [refundApplies, setRefundApplies] = useState([]);  // 待定与正在教学

    //  列表查看退款申请 
    let handleGetListRefund = () => {
        let postData = {
            tutor_id: userInfo.id
        }

        GetListRefund(postData).then(res => {
            let data = R.getData(res);
            if (!!data && data.length > 0) {
                console.log("refund--->", data);
                setRefundApplies(data);
            }
        }).catch(err => {

        })
    }


    // 退款申请
    function handlePendingListFn (data) {
        if (!!refundApplies && refundApplies.length > 0) {
            return (
                <List key="list">
                    {refundApplies.map((item, index) => {
                        console.log("i---> ", item);
                        return (
                            <Item
                                arrow="horizontal"
                                key={item.id}
                                multipleLine
                                onClick={() => {
                                    props.history.push({
                                        pathname: '/orderDetails',
                                        data: item
                                    })
                                }}
                                platform="android"
                            >
                                订单号：{item.code}
                                <Brief><strong>退款状态：{item.status}</strong></Brief>
                                <Brief></Brief>
                                <Brief>退款原因：{item.apply_refund_comment}</Brief>
                                <Brief>退款金额： {!!item.refund_fee ? (item.refund_fee / 100 + "￥") : ''}</Brief>
                            </Item>);
                    })}
                </List>)
        } else {
            return (
                <Result
                    buttonText={"返回主页"}
                    key={"rr"}
                    img={myImg(nodata, "none")}
                    title=""
                    message="暂无数据"
                    buttonType="primary"
                    onButtonClick={() => props.history.push("/main")}
                />);
        }
    }


    useEffect(() => {
        handleGetListRefund();
    }, []);

    const myImg = (src, key) => <img src={src} key={key} className="spe am-icon am-icon-md" alt="" />;

    return (<div className="refund-list">
        <div className="page-title  refund-list-tit">
            <NavBar
                mode="light"
                icon={<Icon type="left" />}
                onLeftClick={() => {
                    props.history.goBack()
                }}
            >
                退款申请列表
            </NavBar>
        </div>

        <div className="page-content  refund-list-content">
            <div className="publish-content-piece">
                {handlePendingListFn(refundApplies)}
            </div>
        </div>

    </div>);
}

export default withRouter(RefundList);